import { ColorSource, Graphics, Point } from "pixi.js";
import { ItransformableItem } from "../../controllers/ITransformableItem";

const scaleArrowBasicLength = 40;

export class Scale extends Graphics {
    public scaleY!: Graphics;
    public target: ItransformableItem | null = null;

    private _drawScaleX(length: number, color: ColorSource = "red") {
        this.lineStyle(2, color, 1);
        this.moveTo(0, 0);
        this.lineTo(length, 0);
        this.beginFill(0xffffff);
        this.drawPolygon([
            new Point(length - 10, -5),             //First point
            new Point(length, -5),              //Second point
            new Point(length, 5),           //Third point
            new Point(length - 10, 5),           //Third point
        ]);

        this.zIndex = 2;
        //Fill shape's color
        this.endFill();
        this.tint = color;
    }

    private _drawScaleY(length: number, color: ColorSource = "green") {
        //scaleY
        let scaleY = new Graphics();
        scaleY.lineStyle(2, color, 1);
        scaleY.moveTo(0, 0);
        scaleY.lineTo(length, 0);
        scaleY.beginFill(0xffffff);
        scaleY.drawPolygon([
            new Point(length - 10, -5),             //First point
            new Point(length, -5),              //Second point
            new Point(length, 5),           //Third point
            new Point(length - 10, 5),           //Third point
        ]);

        //Fill shape's color
        scaleY.endFill();
        scaleY.tint = color;
        scaleY.rotation = 90 * Math.PI / 180;
        this.addChild(scaleY);
        this.scaleY = scaleY;
    }

    constructor() {
        super();
        this._drawScaleX(scaleArrowBasicLength);
        this._drawScaleY(scaleArrowBasicLength);
    }

    public updateScale(scaleX: number, scaleY: number): void {
        let scaleXLength = scaleArrowBasicLength * scaleX;
        let scaleYLength = scaleArrowBasicLength * scaleY;

        this.clear();
        this.scaleY.clear();
        this._drawScaleX(scaleXLength);
        this._drawScaleY(scaleYLength);
    }

    public hoverScaleX() {
        this.tint = "white";
    }

    public hoverScaleY() {
        this.scaleY.tint = "white";
    }

    public leaveScaleX() {
        this.tint = "red";
    }

    public leaveScaleY() {
        this.scaleY.tint = "green";
    }
}